<template>
  <div>
    <!-- 有token 的盒子 -->
    <div v-if="isShow" class="showBox">
      <div class="ImgBox">
        <img :src="user.avatar" alt="头像" />
        <div class="content">
          <!-- 用户头像 -->
          <div class="contentImg">
            <img :src="user.avatar" alt="" />
          </div>
          <!-- 用户信息 -->
          <div class="contentText">
            <div class="username">{{ user.nickname }}</div>
            <div class="">
              <van-button type="primary" size="mini" class="Btn"
              @click="loginOut"
                >退出</van-button
              >
            </div>
            <div class="edituser">编辑个人资料<van-icon name="play" /></div>
          </div>
        </div>
      </div>
    </div>
    <!-- 没token -->
    <div v-else>
       <div class="elseImgBox">
        <img src="http://liufusong.top:8080/img/profile/bg.png" alt="头像" />
        <div class="content">
          <!-- 用户头像 -->
          <div class="contentImg">
            <img src="http://liufusong.top:8080/img/profile/avatar.png" alt="" />
          </div>
          <!-- 用户信息 -->
          <div class="contentText">
            <div class="username">游客</div>
            <div class="">
              <van-button type="primary" size="small" class="Btn"
              @click="toLogin"
                >去登录</van-button
              >
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 2222 -->
    <!-- 原本布局 -->
    <div class="IconBox">
      <van-row class="flex">
        <van-col span="8" class="groupItem" @click="$router.push('/favorate')">
          <van-icon name="star-o"  />
          <p>我的收藏</p>
        </van-col>
        <van-col span="8" class="groupItem" @click="$router.push('/rent')
        ">
          <van-icon name="wap-home-o" />
          <p>我的出租</p>
        </van-col>
        <van-col span="8" class="groupItem">
          <van-icon name="underway-o" />
          <p>看房记录</p>
        </van-col>
      </van-row>
      <!-- 第二排 -->
      <van-row class="flex">
        <van-col span="8" class="groupItem">
          <van-icon name="debit-pay" />
          <p>成为房主</p>
        </van-col>
        <van-col span="8" class="groupItem">
          <van-icon name="contact" />
          <p>个人资料</p>
        </van-col>
        <van-col span="8" class="groupItem">
          <van-icon name="service-o" />
          <p>联系我们</p>
        </van-col>
      </van-row>
    </div>
    <div class="bottomImg">
      <img src="http://liufusong.top:8080/img/profile/join.png" alt="">
    </div>
  </div>
</template>

<script>
import { getToken, delToken } from '@/utils/stroage'
import { getUser } from '@/api/user'
export default {
  data () {
    return {
      isShow: '',
      user: []
    }
  },
  async created () {
    const token = getToken()
    // console.log(token)
    if (token) {
      this.isShow = true
    }
    // 获取用户信息
    const {
      data: { body }
    } = await getUser()

    // 判断token有无认为改动
    // 有body 无数据
    if (!body) {
      this.$toast('登录失效，请重新登录')
      delToken()
      this.isShow = false
    } else {
      this.user = body
      this.user.avatar = `http://liufusong.top:8080${this.user.avatar}`
    }
  },
  methods: {
    toLogin () {
      delToken()
      this.$router.push('/login')
    },
    loginOut () {
      this.$dialog.confirm({
        title: '提示',
        message: '是否确认退出',
        width: '270px',
        confirmButtonText: '退出',
        confirmButtonColor: '#418ce2'
      })
        .then(() => {
          delToken()
          this.$router.push('/login')
        })
        .catch(() => {
        })
    }

  }
}
</script>

<style lang="less" scoped>
.showBox {
  position: relative;
  .ImgBox {
    width: 100%;
    height: 375px;
    // background-color: aquamarine;
    img {
      width: 100%;
      height: 100%;
    }
  }
  // 用户信息 头像-用户名deng
  .content {
    width: 318px;
    height: 207px;
    background-color: #fff;
    z-index: 999;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%);
    box-shadow: 0 0 10px 3px #ddd;
    // 用户头像
    .contentImg {
      width: 70px;
      height: 70px;
      position: absolute;
      top: -35px;
      left: 50%;
      border-radius: 50%;
      transform: translate(-50%);
      border: 5px solid #f5f5f5;
      display: inline-block;
      box-shadow: 0 2px 2px #bdbdbd;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .contentText {
      position: absolute;
      top: 50px;
      padding-top: 15px;
      font-size: 12px;
      left: 50%;
      transform: translate(-50%);
      .username {
        font-size: 13px;
      }
      .edituser {
        color: #999;
        font-size: 12px;
        margin-top: 25px;
      }
      .Btn {
        display: block;
        margin-top: 5px;
        width: 60px;
        height: 20px;
        border-radius: 30px;
        color: #fff;
        padding: 2px 15px;
        background: #21b97a;
        font-size: 12px;
        left: 50%;
        transform: translate(-50%);
      }
    }
  }
}
// 收藏
/deep/.groupItem {
  display: inline-block;
  flex: 1;
  height: 95px;
  // background-color: #21b97a;
  text-align: center;
  padding: 15px 0;
  font-size: 20px;
  p {
    font-size: 13px;
  }
}
/deep/.flex {
  display: flex;
  justify-content: center;
}
.IconBox {
  margin-top: 5px;
}
// 尾部
.bottomImg {
  width: 92%;
  height: 88px;
  margin: auto;
  img {
    width: 100%;
    height: 100%;
  }
}
// 无token 样式
.elseImgBox {
    position: relative;
  width: 100%;
  height: 300px;
  img {
    width: 100%;
    height: 100%;
  }

   .content {
    width: 318px;
    height: 165px;
    background-color: #fff;
    z-index: 999;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%);
    box-shadow: 0 0 10px 3px #ddd;
    // 用户头像
    .contentImg {
      width: 70px;
      height: 70px;
      position: absolute;
      top: -35px;
      left: 50%;
      border-radius: 50%;
      transform: translate(-50%);
      border: 5px solid #f5f5f5;
      display: inline-block;
      box-shadow: 0 2px 2px #bdbdbd;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .contentText {
      position: absolute;
      top: 50px;
      padding-top: 10px;
      font-size: 12px;
      left: 50%;
      transform: translate(-50%);
      .username {
        font-size: 13px;
        text-align: center;
      }
      .edituser {
        color: #999;
        font-size: 12px;
        margin-top: 25px;
      }
      .Btn {
        margin-top: 15px;
        width: 69px;
        height: 30px;
        border-radius: 5px;
        color: #fff;
        // padding: 2px 15px;
        background: #21b97a;
        font-size: 12px;
        left: 50%;
        transform: translate(-50%);
      }
    }
  }
}
</style>
